<template>
	<view class="content">
		<view class="top_header">
			<view class="userinfo">
				<image src="../../static/svg/avatar.svg" class="avatar"></image>
				<view class="u_b">个人中心</view>
			</view>
			<view class="instr">使用方法</view>
		</view>
		<view class="section_list">
			<view class="section_item" @click="gotoPage('phonics')">
				<view>
					<view class="main_title">英语音标（基础）</view>
					<view class="text_miss">已学习1900人</view>
				</view>
				<image src="../../static/svg/pencel.svg" mode="widthFix"></image>
			</view>
			<view class="section_item">
				<view>
					<view class="main_title">英语单词训练</view>
					<view class="text_miss">已学习1900人</view>
				</view>
				<image src="../../static/svg/book.svg" mode="widthFix"></image>
			</view>
			<view class="section_item">
				<view>
					<view class="main_title">口语对话</view>
					<view class="text_miss">已学习1900人</view>
				</view>
				<image src="../../static/svg/award.svg" mode="widthFix"></image>
			</view>
		</view>
		
		<button class="exam_test">默写测试</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
			
		},
		methods: {
			gotoPage(page){
				uni.navigateTo({
					url: '/pages/index/phonics'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 0% 5%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.top_header{
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			.userinfo{
				display: flex;
				font-size: 24rpx;
				.u_b{
					display: flex;
					margin-left: 20rpx;
					align-items: center;
				}
			}
			.instr{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: firebrick;
			}
		}
		.section_list{
			width: 100%;
			padding: 0rpx 100rpx;
			.section_item{
				display: flex;
				min-height: 180rpx;
				font-weight: bold;
				border-radius: 20rpx;
				margin-top: 20rpx;
				padding: 20rpx 40rpx;
				background-color: antiquewhite;
				justify-content: space-between;
				align-items: center;
				image{
					width: 30%;
					margin-left: 40rpx;
				}
				.main_title{
					color: #152502;
					font-size: 40rpx;
				}
				.text_miss{
					font-size: 24rpx;
					color: lightslategray;
					margin-top: 50rpx;
				}
			}
		}
	}
	.exam_test{
		background: linear-gradient(to right, rgb(245, 212, 63), rgb(245, 208, 60));
		color: rgb(101, 48, 0);
		border-radius: 30rpx;
		text-align: center;
		font-weight: bolder;
		border: 2rpx solid #152502;
		position: fixed;
		width: 50%;
		bottom: 50rpx;
	}
	.avatar{
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
	}
</style>

